<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5462c7452d4a2724" async="async"></script>

<section class="background-page">
	<div class="row padding-top">

		<tiles:insertAttribute name="categorylist" />

		<article class="column custom-main-column">

			<s:iterator value="postList" status="status" var="post">
				<s:if test="#status.index % 3 == 0">
					<div class="row collapse" data-equal=".equal">
				</s:if>
				<s:if test="#post.featured == true">
					<div class="column large-4 card-column left small-margin-top">
						<div class="box-shadow card listing featured">
							<h6
								class="background-intense no-margin-bottom inverse text-center bottom-arrow">FEATURED
								PRODUCT</h6>
							<div class="content-padding background-off-white equal"
								style="min-height: 417px;">

								<div class="image-container">
									<s:url action="viewing" var="viewing">
										<s:param name="postId" value="%{#post.id}" />
									</s:url>
									<s:a href="%{viewing}">
										<s:iterator value="#post.photos.{^#this.dimension=='M'}" var="postPhoto" status="stat">
											<s:if test="#stat.first == true">
												<img src="${ postPhoto.URL }" alt="${ post.equipmentName }">
											</s:if>
										</s:iterator>
									</s:a>
								</div>
								<h3 class="small">
									<s:a href="%{viewing}">
										<s:property value="equipmentName" />
									</s:a>
								</h3>
								<s:if
									test="%{post.equipmentItemNumber != null && post.equipmentItemNumber != ''}">
									<p class="bold light">
										<i class="fa fa-barcode"></i> LISTING ID:
										<s:property value="equipmentItemNumber" />
									</p>
								</s:if>
								<p>
									<s:property value="title" />
								</p>
							</div>
							<div
								class="content-padding-large background-off-white border-top">
								<div class="text-center">
									<s:a href="%{viewing}"
										cssClass="button alt small no-margin-bottom">
										<i class="fa fa-plus-square left-side"></i> More Info
										</s:a>
								</div>
							</div>
						</div>
					</div>
				</s:if>
				<s:else>
					<div class="column large-4 card-column left small-margin-top">
						<div class="box-shadow card listing">
							<div class="content-padding background-off-white equal"
								style="min-height: 417px;">

								<div class="image-container">
									<s:url action="viewing" var="viewing">
										<s:param name="postId" value="%{#post.id}" />
									</s:url>
									<s:a href="%{viewing}">
										<s:iterator value="#post.photos.{^#this.dimension=='M'}" var="postPhoto" status="stat">
											<s:if test="#stat.first == true">
												<img src="${ postPhoto.URL }" alt="${ post.equipmentName }">
											</s:if>
										</s:iterator>
									</s:a>
								</div>
								<h3 class="small">
									<s:a href="%{viewing}">
										<s:property value="equipmentName" />
									</s:a>
								</h3>
								<s:if
									test="%{post.equipmentItemNumber != null && post.equipmentItemNumber != ''}">
									<p class="bold light">
										<i class="fa fa-barcode"></i> LISTING ID:
										<s:property value="equipmentItemNumber" />
									</p>
								</s:if>
								<p>
									<s:property value="title" />
								</p>
							</div>
							<div
								class="content-padding-large background-off-white border-top">
								<div class="text-center">
									<s:a href="%{viewing}"
										cssClass="button alt small no-margin-bottom">
										<i class="fa fa-plus-square left-side"></i> More Info
										</s:a>
								</div>
							</div>
						</div>
					</div>
				</s:else>

				<s:if test="#status.index % 3 == 2 || #status.last">
	</div>
	</s:if>
	</s:iterator>

	</article>
	</div>
</section>
